<template>
  <div style="background-color: #fff;">
    <newPageHeader></newPageHeader>
    <div class="buyer-register">
      <h2 class="title">采购商申请入驻</h2>
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="公司名称" prop="company_title">
          <el-input v-model="form.company_title" placeholder="请输入营业执照上公司名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="name" :rules="{ required: true, message: '请输入联系人姓名', trigger: 'blur' }">
          <el-input v-model="form.name" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="contact_phone"
          :rules="{ required: true, message: '请输入11位联系手机号码', trigger: 'blur', pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }">
          <el-input v-model="form.contact_phone" placeholder="请输入11位联系手机号码"></el-input>
        </el-form-item>
        <el-form-item label="邀请码" prop="contactTel">
          <el-input  v-model="form.contactTel" placeholder="请输入邀请码"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="pwd" :rules="{ required: true, message: '请输入登录密码', trigger: 'blur' }">
          <el-input type="password" v-model="form.pwd" placeholder="请输入登录密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pwd2"
          :rules="{ required: true, message: '请再次确认密码', trigger: 'blur', validator: confirmPasswordValidator }">
          <el-input type="password" v-model="form.pwd2" placeholder="再次确认密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="buttonClose" type="default" @click="resetForm('form')">取消</el-button>
          <el-button class="buttonPay" type="primary" @click="submitForm('form')">提交申请</el-button>
        </el-form-item>
      </el-form>
    </div>
    <newPageFooter></newPageFooter>
  </div>
</template>
<script>
import newPageHeader from '../../../components/page/engineering5188/new-page-header.vue';

import newPageFooter from '../../../components/page/engineering5188/new-page-footer.vue';

export default {
  name: "purchaser",
  components: {
    newPageHeader,
    newPageFooter
  },
  data() {
    return {
      form: {
        company_title: '',
        name: '',
        contact_phone: '',
        mobile: '',
        pwd: '',
        pwd2: '',

      },
      rules: {},
      captchaSrc: 'https://example.com/captcha.jpg' // 这里替换为实际的验证码图片地址
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 这里添加提交表单的逻辑，比如调用后端接口
          console.log('表单提交成功');


          this.$httpApi("/api/buyAuth", {
            ...this.form,
          }, "post").then(res => {
            if (res.code == 200) {
              this.$router.push('/Successful')
            } else {
              alertErr(res.msg);
            }
          })


        } else {
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$router.push('/Successful');
      this.$refs[formName].resetFields();

    },
    confirmPasswordValidator(rule, value, callback) {
      if (value !== this.form.pwd) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
    refreshCaptcha() {
      // 这里添加刷新验证码的逻辑，比如更新验证码图片的src
      this.captchaSrc = `https://example.com/captcha.jpg?t=${Date.now()}`;
    }
  }
};
</script>
<style scoped lang="less">
.buyer-register {
  padding: 0 590px 104px 590px;
  text-align: center;
  margin-top: 66px;
  
  /deep/ .el-form-item__label {
    color: #000 !important;
  }
}
.buttonClose {
  width: 160px;
  height: 44px;
  background: #F5F5F5;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #D7D7D7;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 48px;
}

.buttonPay {
  width: 160px;
  height: 44px;
  background: #014BC4;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 4px 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  margin-left: 16px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.buyer-register {
  padding: 0 590px 104px 590px;
  text-align: center;
  margin-top: 66px;
}

.title {

  font-family: PingFang SC, PingFang SC;

  font-size: 36px;
  color: #333333;
  line-height: 48px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
}

.captcha-img {
  width: 120px;
  height: 40px;
  vertical-align: middle;
  margin-left: 10px;
  cursor: pointer;
}
</style>